/**
 * 消费记录
 */
import {  Card ,Table} from 'antd';
import { connect} from 'umi';
import React, {useEffect} from 'react';
import { GridContent } from '@ant-design/pro-layout';

const columns = [
  {
    title: '会员卡',
    dataIndex: 'cardName',
  },
  {
    title: '金额',
    dataIndex: 'money',
  },
  {
    title: '消费说明',
    dataIndex: 'consumeStatement',
  },
  {
    title: '时间',
    dataIndex: 'consumeTime',
  },
];
const Info = props => {
  const { dispatch, id,consumeRecord,loading} = props
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'cubeVip/fetchConsume',
        payload: {
          memberId:id
        },
      })
     }
   }, []);
  return (
    <GridContent>
            <Card
              title="消费记录"
              style={{
                marginBottom: 24,
              }}
              bordered={false}
            >
               <Table
                pagination={false}
                loading={loading}
                dataSource={consumeRecord}
                columns={columns}
              />
            </Card>
          </GridContent>
  );
};

export default connect(({ loading,cubeVip }) => ({
  loading: loading.effects['cubeVip/getConsumeRecord'],
  consumeRecord:cubeVip.consumeRecord
}))(Info);
